<template>
    <div>
        <div class="head">
            <el-input class="searchInput" size="mini" placeholder="根据栏目名称搜索"></el-input>
            <el-button icon="fa fa-search" type="primary" size="mini" >搜索栏目</el-button>
            <el-button icon="fa fa-plus"  type="primary" size="mini" @click="showAddCateDialog">新增栏目</el-button>
        </div>
        <div>
            <el-table
                    @selection-change="selectionChange"
                    :data="tableData">
                <el-table-column
                        type="selection"
                        width="55">
                </el-table-column>
                <el-table-column
                        prop="id"
                        label="编号">
<!--                                    <template slot-scope="scope">{{ scope.row.date }}</template>-->
                </el-table-column>
                <el-table-column
                        prop="createTime"
                        label="创建时间">
                </el-table-column>
                <el-table-column
                        prop="cateName"
                        label="栏目名称">
                </el-table-column>
                <el-table-column label="操作">
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                @click="handleEdit(scope.row)">编辑</el-button>
                        <el-button
                                size="mini"
                                type="danger"
                                @click="handleDelete(scope.row)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>
        </div>
        <el-button type="danger" size="mini"  :disabled="this.multiDeleteBtn" @click="someDelete">批量删除</el-button>
        <el-dialog
                title="新增栏目"
                :visible.sync="dialogVisible"
                width="30%">
            <span><el-input style="width: 100%; margin-right: 10px" size="mini" placeholder="请输栏目名" v-model="addedCategory"></el-input></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="addCategory" size="mini">确 定</el-button>
            </span>
        </el-dialog>
        <el-dialog
                title="编辑栏目"
                :visible.sync="dialogVisible2"
                width="30%">
            <span><el-input style="width: 100%; margin-right: 10px" size="mini" placeholder="请输栏目名" v-model="update"></el-input></span>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible2 = false" size="mini">取 消</el-button>
                <el-button type="primary" @click="showUpdateDate" size="mini">确 定</el-button>
            </span>
        </el-dialog>
    </div>

</template>

<script>
    export default {
        name: "CategoryManage",

        data(){
            return{
                tempUpdateItem:{},
                update:'',
                someDeleteItem:[],
                dialogVisible:false,
                dialogVisible2:false,
                addedCategory:'',
                multiDeleteBtn:true,
                tableData:[
                    {
                        id:1001,
                        createTime:'2020-08-08',
                        cateName:'SpringBoot'
                    },
                    {
                        id:1002,
                        createTime:'2020-08-08',
                        cateName:'Spring'
                    },
                    {
                        id:1003,
                        createTime:'2020-08-08',
                        cateName:'SpringMVC'
                    },
                    {
                        id:1004,
                        createTime:'2020-08-08',
                        cateName:'Mybatis'
                    },
                ]
            }
        },

        methods:{

            handleEdit(row){
               this.dialogVisible2 = true;
               this.update=row.cateName;
               this.tempUpdateItem= row;
            },
            showUpdateDate(){
                this.tableData.forEach((item,i)=>{
                    if (item.id==this.tempUpdateItem.id){
                        item.cateName=this.update;
                    }
                })
                this.dialogVisible2 = false;
            },
            // 批量删除
            someDelete(){
                this.$confirm('是否删除该栏, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.someDeleteItem.forEach((item,i) => {
                        this.tableData.forEach((data,index) => {
                                if (item.id == data.id) {
                                    this.tableData.splice(index, 1);
                                }
                            }
                        )}
                    )
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //点击删除
            handleDelete(row) {
                this.$confirm('是否删除该栏, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    //遍历tableData
                    this.tableData.forEach((item, i) => {
                        if (item.id == row.id) {
                            this.tableData.splice(i, 1);
                            this.$message.success('删除成功');
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },

            showAddCateDialog(){
                this.dialogVisible=true
            },
            addCategory(){
              if (this.addedCategory !=null && this.addedCategory!=''&& this.addedCategory!="null"){
                  let time =new Date();
                  let year =time.getFullYear();
                  let month = (time.getMonth() + 1 + '').padStart(2,"0");
                  let date = (time.getDate() + '').padStart(2,"0");
                  let category = {
                      id:1005,
                      createTime:`${year}-${month}-${date}`,
                      cateName:this.addedCategory
                  }
                      this.tableData.push(category),
                      this.dialogVisible=false,
                      this.$message.success('添加成功，')
                      this.addedCategory=''
              }else{
                  $message.warn("您输入的名字不规范")

              }

            },


            //复选框回调
            selectionChange(selection){
                if (selection.length>0){
                    this.multiDeleteBtn =false;
                }else{
                    this.multiDeleteBtn =true;
                }
               this.someDeleteItem = selection;
            },

        }
    }
</script>

<style scoped>
    .head{
        margin: 0px;

    }
    .searchInput{
        width: 400px;
        margin-right: 10px;
    }
</style>